<template>
  <div class="transfer-panel">
    <p class="transfer-panel-header">
      <el-checkbox
        v-model="allChecked"
        :indeterminate="isIndeterminate"
        @change="handleAllCheckedChange">
        {{title}}
        <span>{{checkedSummary}}</span>
      </el-checkbox>
    </p>
    <div class="transfer-panel-body optiscroll"
      :class="$vnode.data.ref"
      style="height: 250px"
      ref="panel">
      <el-checkbox-group
        v-model="checked"
        class="el-transfer-panel__list">
        <p v-if="!filteredDatas.length" style="padding: 8px 15px;color:#999">无数据</p>
        <template v-if="$vnode.data.ref=='rightpanel'">
          <el-checkbox
            class="el-transfer-panel__item"
            :label="item[fieldKey.key]"
            :key="item[fieldKey.key]"
            :disabled="item[fieldKey.disabled] === 1"
            v-for="(item, idx) in filteredDatas">
              <div class="up-and-down" v-if="!item.disabled">
                <span class="el-icon-arrow-up"
                  :class="[{'disabled': idx == 0 || idx == 1 && filteredDatas[0][fieldKey.disabled]}]"
                  @click="ordinal($event, 'up', item)"></span>
                <span class="el-icon-arrow-down"
                  :class="[{'disabled': idx == filteredDatas.length - 1}]"
                  @click="ordinal($event, 'down', item)"></span>
              </div>
              <span>{{item[fieldKey.label]}}</span>
          </el-checkbox>
        </template>
        <template v-else>
          <el-checkbox
            class="el-transfer-panel__item"
            :label="item[fieldKey.key]"
            :key="item[fieldKey.key]"
            :disabled="item[fieldKey.disabled] === 1"
            v-for="item in filteredDatas">
              <span>{{item[fieldKey.label]}}</span>
          </el-checkbox>
        </template>
      </el-checkbox-group>
    </div>
    <p class="transfer-panel-footer">
      <slot></slot>
    </p>
  </div>
</template>

<script>
// import Optiscroll from 'nb-optiscroll'
// import Draggable from 'nb-draggable'
import {
  isEqual,
  map,
  findIndex
} from 'lodash'
export default {
  name: 'TransferPanel',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },
    title: String,
    fieldKey: Object
  },
  data () {
    return {
      map,
      keyProp: 'key',
      disabledProp: 'disabled',
      checked: [],
      allChecked: false,
      filteredDatas: this.data.slice(),
      filteredDatasClone: this.data.slice(),
      instance: null
    }
  },
  components: {
    // Draggable
  },
  watch: {
    checked (checked) {
      this.$emit('checked-change', checked)
    },
    data (nv) {
      this.filteredDatas = nv.slice()
      this.filteredDatasClone = nv.slice()
    }
  },
  computed: {
    checkedSummary () {
      const checkedLength = this.checked.length
      const dataLength = this.data.length
      if (this.data.length) {
        return `${checkedLength}/${dataLength}`
      }
    },
    checkableData () {
      return this.data.filter(item => !item[this.fieldKey.disabled])
    },
    isIndeterminate () {
      const checkedLength = this.checked.length
      this.allChecked = checkedLength && checkedLength === this.checkableData.length
      return checkedLength > 0 && checkedLength < this.checkableData.length
    }
  },
  created () {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  beforeDestroy () {
    this.instance && this.instance.destroy()
  },
  methods: {
    initScroll () {
      // this.instance = new Optiscroll(this.$refs.panel, {wrapContent: false})
    },
    reset () {
      this.checked = []
    },
    handleAllCheckedChange (checked) {
      this.checked = checked
        ? this.checkableData.map(item => item[this.fieldKey.key])
        : []
    },
    ordinal (e, action, itm) {
      e.preventDefault()
      let index = findIndex(this.filteredDatas, o => isEqual(o[this.fieldKey.key], itm[this.fieldKey.key]))
      let cloneArr = this.filteredDatas.slice()

      if (isEqual(action, 'up')) {
        if (index <= 0) return
        if (cloneArr[index - 1].disabled) return
      } else {
        if (index >= this.filteredDatas.length - 1) return
      }

      let offset = isEqual(action, 'up')
        ? index - 1
        : index + 1
      cloneArr[index] = cloneArr[offset]
      cloneArr[offset] = itm

      this.$emit('order-change', map(cloneArr.slice(), this.fieldKey.key))
    }
  }
}
</script>
<style lang="scss">
.transfer-panel-body {
  >.optiscroll-h {
    display: none;
  }
  .optiscroll-content {
    overflow-x: hidden!important;
  }
}
</style>
